<template >
  <a-row>
    <a-col :span="8">
          <a-statistic :title="$t('zong-9')" :value="totalBalance" class="statistic-item" :value-style="{ color: '#3f8600', 'font-size': '20px' }" >
            <template #suffix>
              <ReloadOutlined
                  style="margin-left: 5px; margin-top: 3px;cursor: pointer;"
                  @click="Refresh"
              />
            </template>
    </a-statistic>
    </a-col>

    <a-col :span="8">
      <a-statistic :title="$t('qian-0')" :value="walletBalance" class="statistic-item" :value-style="{ color: '#3f8600' }" />
    </a-col>

    <a-col :span="8">
      <a-statistic :title="$t('youX-9')" :value="gameBalance" class="statistic-item" :value-style="{ color: '#3f8600' }" />
      <a-button 
        :loading="loading"
        @click="fetchAllGameFundsRecovery"
        size="small" 
        style="margin-right: 5px">
        <span>{{ $t('yiJi-1') }}</span>
      </a-button>
    </a-col>
  </a-row>
</template>
<script setup lang="ts">
import { ReloadOutlined } from "@ant-design/icons-vue";
import { walletTransfer } from '@/api/financial';
import { useUserStore } from '@/stores/userInfo';
import { message } from 'ant-design-vue';
import { ref } from 'vue';
import { useGameChannelStore } from '@/stores/gameChannel';
import { useI18n } from 'vue-i18n'
import {useGameInfoStore} from "stores/gameInfo";
import {editAntoTransferSetting, getUserInfo} from "@/api/account";
const { t } = useI18n()
const { user, updateUserInfo } = useUserStore();
const gameChannelStore = useGameChannelStore();

const totalBalance = computed(() => user.total_assets || 0);
const walletBalance = computed(() => user.wallet_balance || 0);
const gameBalance = computed(() => user.game_balance || 0);
const gameChannelList = computed(() => {
  let result: any[] = [];
  if (Array.isArray(gameChannelStore.gameChannleList)) {
    result = gameChannelStore.gameChannleList.map((item: any) => {
      return {
        ...item,
      }
    });
  }
  return result;
});

const gameInfoStore = useGameInfoStore();
const loading = ref<boolean>(false);

function refresh(param:any, callback: () => void = ()=>{}) {
  updateUserInfo(param);
  gameInfoStore.updateGameType(callback);
}

async function Refresh() {

  const hide = message.loading({content:"loading..."},0)

  try {
    // 同时发起两个请求，使用Promise.all等待两个请求都完成
    await Promise.all([
      getUserInfo({sync_balance:true}),
    ]);

    setTimeout(hide,0);
    gameInfoStore.updateGameType()
    message.success(t("caoZ-0"));
    // 最后返回处理结果
  } catch (error) {
    setTimeout(hide,0);
    message.error(t('tiJi-0'));
    console.log(error);
  }
}

function fetchAllGameFundsRecovery() {
  let game_channel_id = [];
  if (Array.isArray(gameChannelList.value)) {
    game_channel_id = gameChannelList.value.map((item: any) => item.id);
  }

  if (game_channel_id.length === 0) {
    return;
  }

  loading.value = true;
  walletTransfer({
    "amount": -1,
    "game_channel_id": game_channel_id,
    "ty": 1,
    "request_id":Date.now()
  })
  .then((res: any) => {
    console.log(res);
    if (res.status === 'OK') {
      message.success(t('caoZ-0'));

      refresh({});
    }
  })
  .catch((err: any) => {
    console.log(err);
  })
  .finally(() => {
    loading.value = false;
  });
}

</script>
<style lang="less">
  .statistic-item {
    .ant-statistic-title {
      font-size: 20px;
    }
    .ant-statistic-content-value {
      font-size: 18px;
    }
  }
</style>